<template>
  <div class="import-sub-tab">
    <scroll-bar :slot-name-list="slotNameList">
      <template #partA>
        <excel-import-form />
      </template>
      <template #partB>
        <!-- Excel 导入异常信息提醒 -->
        <div v-if="errMsg" class="err-msg">
          <div class="err-msg-title">
            <el-icon class="icon" :size="18"><WarningFilled /></el-icon>
            <!-- 换行: white-space: pre-line -->
            <span class="text" style="white-space: pre-line">
              {{ errMsg.title }}
            </span>
          </div>
          <template v-if="errMsg.msgArr">
            <div class="err-msg-content">
              <el-scrollbar height="200px">
                <!-- 每一项错误信息 -->
                <div
                  v-for="item in errMsg.msgArr"
                  :key="item"
                  class="item"
                  :class="{ active: curActive === item }"
                >
                  {{ item }}
                </div>
              </el-scrollbar>
            </div>
          </template>
        </div>
      </template>
    </scroll-bar>
  </div>
</template>

<script lang="ts" setup>
import useParseExcelDataTransfer from '@renderer/hooks/sub/useParseExcelDataTransfer'
import useFileRenamePropsStore from '@renderer/store/CpnProps/FileRenamePropsStore'
import ExcelImportForm from './Form/ExcelImportForm/index.vue'
import { WarningFilled } from '@element-plus/icons-vue'
import ScrollBar from '@renderer/components/ScrollBar/index.vue'
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'

const props = defineProps<{
  tableData: ITableDataItem[]
}>()

const { errMsg } = storeToRefs(useFileRenamePropsStore())

const { parseExcelDataTransfer } = useParseExcelDataTransfer(props.tableData)

const slotNameList = computed(() => {
  if (errMsg.value) {
    return ['partA', 'partB']
  }
  return ['partA']
})

// 当前选中的 msg
const curActive = ref<string>()

function handleParse() {
  errMsg.value = parseExcelDataTransfer()
}

defineExpose({
  handleParse
})
</script>

<style lang="less" scoped>
.import-sub-tab {
  .err-msg {
    font-size: 14px;

    .err-msg-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 16px;
      padding: 4px 0;
      font-size: 14px;
      border-radius: 4px;
      color: var(--el-color-error);
      background: var(--el-color-error-light-9);

      .icon {
        margin: 0 8px 0 16px;
        color: var(--el-color-error);
      }

      .text {
        line-height: 22px;
      }
    }

    .err-msg-content {
      border: 1px solid #e6e8eb;
      border-radius: 4px;
      padding: 8px 0;

      .item {
        padding-left: 8px;
        height: 24px;
        line-height: 24px;
        cursor: pointer;

        &:hover,
        &.active {
          background: var(--el-color-primary-light-8);
        }
      }
    }
  }
}
</style>
